/**
 * Created by 游永年 on 2019-01-23 15:42.
 * 预约第二步,上课时间
 */

'use strict'
import React, {Component} from 'react';
import {connect} from 'dva';
import {Button} from "antd-mobile";
import Full from "../../../components/layout/Full";
import style from './MySteps.less'

const data = [
  {name: '周一', value: 'zy'},
  {name: '周二', value: 'ze'},
  {name: '周三', value: 'zs'},
  {name: '周四', value: 'zsi'},
  {name: '周五', value: 'zw'},
  {name: '周六', value: 'zl'},
  {name: '周日', value: 'zr'},
];

class BookTwo extends Component {
  render() {
    // const {value} = this.props;
    return (<Full>
      <div className={style.timeLabel}>选扫每周周几上课</div>
      <div className={style.input}>
        {data.map(({name, value}) => {
          const c = this.checkSelect(value);
          return <div
            className={`${style.tag} ${c ? style.tagSelected : null}`}
            key={value + ''}
            onClick={_ => this.onChange(value, !c)}
          >
            {name}
          </div>
        })}
      </div>
      <Button type={'primary'} onClick={this.onClick}>生成课表</Button>
    </Full>);
  }

  checkSelect = val => {
    const {value} = this.props;
    if (!!value) {
      return new Set(value).has(val);
    } else {
      return false;
    }
  }

  onChange = (newVal, checked = false) => {
    const {value = []} = this.props;
    const onChange = val => this.props.dispatch({type: 'product/sksj', payload: val});
    if (checked) {
      onChange([...value, newVal]);
    } else {
      const set = new Set(value);
      set.delete(newVal);
      onChange(Array.from(set));
    }
  }

  onClick = _ => this.props.dispatch({type: 'product/next'});
}

BookTwo.propTypes = {};

const opts = ({product}) => {
  const {sksj = []} = product || {};
  return {value: sksj};
}
export default connect(opts)(BookTwo);
